import React, { useEffect, useState } from 'react'
import { Form, Input, Button, Space, Cascader } from 'antd';
import AppDialog from '../../components/AppDialog'
import citydata from './citydata';

const { TextArea } = Input;

const EditAddress = ({ visible, orderInfo, onHide }) => {
  const tailLayout = {
    wrapperCol: {
      offset: 10,
      span: 14,
    },
  };
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    if (visible && orderInfo.order_id) {
      form.setFieldsValue(orderInfo)
    }
  }, [orderInfo])

  // 点击确定
  const onFinish = async (values) => {
    console.log(values)
    handleDialogClosed()
  };

  // 提交表单且数据验证失败后回调事件
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  // 点击取消
  const handleDialogClosed = (type) => {
    form.resetFields();
    onHide(type)
  };

  return (visible ?
    <AppDialog
      title="修改地址"
      visible={visible}
      onClosed={handleDialogClosed}
    >
      <Form
        form={form}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="订单编号"
          name="order_number"
        >
          <Input disabled />
        </Form.Item>
        <Form.Item
          label="省市区/县"
          name="address1"
          rules={[{ required: true, message: "请选择省市区县" }]}
        >
           <Cascader
            options={citydata}
            style={{ width: '100%' }}
            expandTrigger="hover"
            allowClear={true}
          />
        </Form.Item>
        <Form.Item
          label="详细地址"
          name="address2"
          rules={[{ required: true, message: "请输入详细地址" }]}
        >
         <TextArea rows={2} />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Space>
            <Button type="primary" htmlType="submit" loading={loading}>确定</Button>
            <Button onClick={() => handleDialogClosed()}>取消</Button>
          </Space>
        </Form.Item>
      </Form>
    </AppDialog>
    : null
  )
}

export default EditAddress